<template>
    <div>
      <el-form size="mini" label-width="125px" ref="form" inline :rules="rules" :model="formData" >
          <el-form-item :label="item.lable" :class="item.lableLength>8?'changeLHight':''" :key="index" :prop="item.key" v-for="(item,index) in list" >
            <!--输入框-->
              <el-input
                v-if="item.type == 0"
                :prop = "item.key"
                v-model="formData[item.key]"
                class="inputWidth"
                :style="'width: '+item.gs+';'"
                :placeholder="'请输入'+item.lable"
                :id="module+''+item.keyupsxh"
                :keyupsxh = "item.keyupsxh"
                @keyup.enter.native="enterkeyup(item.keyupsxh)"
                :type="item.columntype"
                min="0"
                :disabled="item.is_readonly"
                @input="forceUpdate"
              ></el-input>



            <!--日期框-->
            <el-date-picker
              v-if="item.type == 1"
              :prop = "item.key"
              v-model="formData[item.key]"
              type="date"
              :placeholder="'请输入'+item.lable"
              value-format="yyyy-MM-dd"
              class="inputWidth"
              :style="'width: '+item.gs+';'"

              :id="module+''+item.keyupsxh"
              :keyupsxh = "item.keyupsxh"
              @keyup.enter.native="enterkeyup(item.keyupsxh)"
              :disabled="item.is_readonly"
              @blur="forceUpdate"

            >
            </el-date-picker>

            <!--时分秒日期框-->
            <el-date-picker
              :prop = "item.key"
              v-if="item.type == 5"
              v-model="formData[item.key]"
              type="datetime"
              :placeholder="'请输入'+item.lable"
              value-format="yyyy-MM-dd HH:mm:ss"
              class="dateInputWidth"
              :style="'width: '+item.gs+';'"

              :id="module+''+item.keyupsxh"
              :keyupsxh = "item.keyupsxh"
              @keyup.enter.native="enterkeyup(item.keyupsxh)"
              :disabled="item.is_readonly"
              @blur="forceUpdate"
            >
            </el-date-picker>

            <!--下拉框-->
            <el-select
              :prop = "item.key"
              v-else-if="item.type == 6"
              class="inputWidth"
              :style="'width: '+item.gs+';'"
              v-model="formData[item.key]"
              :placeholder="'请选择'+item.lable"
              filterable

              :id="module+''+item.keyupsxh"
              :keyupsxh = "item.keyupsxh"
              @keyup.enter.native="enterkeyup(item.keyupsxh)"
              :disabled="item.is_readonly"
              @change="forceUpdate"
            >
              <el-option value=""></el-option>
              <el-option
                v-for="item2 in item.searchTypeForSelectDtos"
                :key="item2.value"
                :label="item2.showValue"
                :value="item2.value"
              ></el-option>
            </el-select>


            <!--下拉框-->
            <el-select
              :prop = "item.key"
              v-else-if="item.type == 8"
              :style="'width: '+item.gs+';'"
              v-model="formData[item.key]"
              :placeholder="'请选择'+item.lable"
              filterable

              :id="module+''+item.keyupsxh"
              :keyupsxh = "item.keyupsxh"
              @keyup.enter.native="enterkeyup(item.keyupsxh)"
              :disabled="item.is_readonly"
              @change="forceUpdate"
            >
              <el-option value=""></el-option>
              <el-option
                v-for="item2 in item.searchTypeForSelectDtos"
                :key="item2.value"
                :label="item2.showValue"
                :value="item2.value"
              ></el-option>
            </el-select>

          </el-form-item>
      </el-form>

    </div>
</template>

<script>
    export default {
      name: "inputCommon",
      props:["tableid","module"],
      data(){
          return{
            entrySequence:1,//初始化第一个输入框获取焦点
            list:[],//表单的字段集合
            formData:{},//用户输入的数据
            rules:{}//字段验证规则
          }
      },
      created() {
        this.getData();
        this.fieldValidationRules();
      },
      methods:{
        async getData(){
          let res = await api.post("/admin/api/system/SystemCommonBusinessController/getInputDisplayFields",{id:this.tableid,module:this.module})
          this.list = res.data;
        },
        async fieldValidationRules(){
          let res = await api.post("/admin/api/system/SystemCommonBusinessController/fieldValidationRules",{id:this.tableid,module:this.module})
          this.rules = res.data;
        },
        huiche() {//回车事件
          let doc = document.getElementById(this.module+""+this.entrySequence);
          if(doc == null){
            this.entrySequence = 1;
            this.huiche(this.entrySequence);
          }else {
            doc.focus();
          }
        },
        enterkeyup(number){
          console.log(number);
          number++;
          this.entrySequence = number;
          this.huiche();
        },
        forceUpdate() {
          this.$forceUpdate();//强制更新数据
        },
      },
      watch:{
        list:function () {//表单初始化完成后执行定位到第一个输入框
          this.$nextTick(function(){
            console.log(this.module+""+this.entrySequence);
            let doc = document.getElementById(this.module+""+this.entrySequence);
            // doc.focus();
          });

        }
      }
    }
</script>

<style lang="scss" scoped>
  .inputWidth {
    width: 170px;
  }
</style>
